<template>
  <view>
    <view class="wrapper">
      <view class="list">
        <view class="item" v-for="(item, index) in list" :key="index">
          <view class="header">
            <image class="avatar" :src="'/static/default-avatar.png'"></image>
          </view>
          <view class="comment">
            <view class="nickname">
              <view>AOERKE官方素材</view>
              <view style="display: flex">
                <u-button
                  size="mini"
                  type="warning"
                  :plain="true"
                  @click="savaImages(item.image)"
                  >一键保存</u-button
                >
              </view>
            </view>
            <view style="display: flex; padding-bottom: 6px">
              <text style="color: rgba(0, 0, 0, 0.45); font-size: 12px">
                {{ item.title }}
              </text>
            </view>
            <u-parse class="content" :html="item.content"></u-parse>
            <!-- <view class="content">{{ item.content }}</view> -->
            <view
              class="image-box"
              v-if="[10, 20].includes(item.show_type) && item.image.length > 0"
            >
              <view class="img-list">
                <image
                  class="img-item"
                  mode="aspectFill"
                  lazy-load
                  v-for="(img, mindex) in item.image"
                  :key="mindex"
                  :src="img.preview_url"
                  @click="previewMedia(img.preview_url, item.image)"
                  :show-menu-by-longpress="true"
                ></image>
              </view>
            </view>

            <view
              class="image-box"
              v-else-if="[30].includes(item.show_type) && item.video.length > 0"
            >
              <view class="img-list">
                <video
                  :key="mindex"
                  style="width: 100%"
                  id="myVideo"
                  :src="_v.external_url"
                  controls
                  v-for="(_v, mindex) in item.video"
                ></video>
              </view>
            </view>

            <view class="time">
              <u-icon
                label-size="24"
                :color="item.is_collect ? '#ff9900' : ''"
                size="18px"
                name="star"
                :label="item.collect > 0 ? item.collect : ''"
                @click="
                  handelClick(item, item.is_collect ? 'unCollect' : 'collect')
                "
                :label-color="item.is_collect ? '#ff9900' : ''"
              ></u-icon>
              <u-icon
                label-size="24"
                :color="item.is_like ? '#ff9900' : ''"
                size="18px"
                name="thumb-up"
                :label="item.likes > 0 ? item.likes : ''"
                @click="handelClick(item, item.is_like ? 'unLike' : 'like')"
                :label-color="item.is_like ? '#ff9900' : ''"
              ></u-icon>
              <u-icon
                size="18px"
                label-size="24"
                name="download"
                :label="item.download > 0 ? item.download : ''"
                @click="handelClick(item, 'download')"
              ></u-icon>
              <!-- <u-icon
                label-size="24"
                size="18px"
                name="zhuanfa"
                :label="item.forward"
                @click="handelClick(item, 'forward')"
              ></u-icon> -->
              <button
                open-type="share"
                style="
                  padding: 0;
                  margin: 0;
                  background: transparent;
                  color: gray;
                "
              >
                <u-icon
                  label-size="24"
                  size="18px"
                  name="zhuanfa"
                  :label="item.forward > 0 ? item.forward : ''"
                ></u-icon>
              </button>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: "ff-comments",
  props: {
    store: {
      type: Object,
      default: null,
    },
    list: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {};
  },
  created() {},
  methods: {
    handelClick(item, type) {
      if (type === "download") {
        return this.savaImages(item.image);
      }
      if (type === "forward") {
        // 分享给别人
        return;
      }
      this.$emit("handelClick", item, type);
    },
    //下载海报，只在APP内有效
    savaImages(_images) {
      _images.forEach((_img) => {
        uni.downloadFile({
          //下载
          url: _img.external_url, //图片下载地址
          success: (res) => {
            if (res.statusCode === 200) {
              uni.saveImageToPhotosAlbum({
                //保存图片到系统相册。
                filePath: res.tempFilePath, //图片文件路径
                success: function () {
                  uni.showToast({
                    title: "图片保存成功",
                    icon: "none",
                  });
                },
                fail: function (e) {
                  console.log(e);
                  uni.showToast({
                    title: "图片保存失败",
                    icon: "none",
                  });
                },
              });
            }
          },
        });
      });
    },

    previewMedia(image, list) {
      uni.previewImage({
        current: image,
        urls: list.map((e) => e.preview_url),
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  background: #ffffff;
  margin: 10px 5px;
  padding: 0px;
  // padding-bottom: 100px;
  // margin-bottom: 100px;

  // width: 100%;
  .label {
    padding: 10px 0px 0px 10px;
    color: #888888;
    font-size: 14px;
    font-weight: 600;
  }
}

.item {
  display: flex;
  margin: 10px 5px;
  padding: 5px;
  padding-bottom: 0px;
  // border-radius: 10px;
  border-bottom: 1px solid #eeeeee;
  height: auto;

  .header {
    padding-right: 8px;

    .avatar {
      height: 45px;
      width: 45px;
      border-radius: 5px;
    }
  }

  .comment {
    // padding:0px 10px;
    width: calc(100% - 55px);

    .nickname {
      font-weight: 600;
      // padding-bottom: 8px;
      display: flex;
      justify-content: space-between;

      view {
        &:last-child {
          font-weight: 500;
          color: #888888;
        }
      }
    }

    .content {
      line-height: 1.5;
      font-size: 15px;
      color: #606266;
      line-height: 1.8;
      text-align: left;
    }

    .images {
      padding-top: 5px;
    }

    .time {
      font-size: 12px;
      color: #888888;
      display: flex;
      justify-content: space-between;
      // padding-bottom: 5px;
      margin-right: 15px;
    }
  }
}

.image-box {
  // padding-bottom: 10px;

  .img-list {
    // padding: 16rpx 0;
    // display: flex;
    // flex-wrap: wrap;
    margin-top: 16rpx;

    .img-item {
      display: inline-block;
      width: 180rpx;
      height: 180rpx;

      &:only-child {
        width: 400rpx;
        height: 380rpx;
        border-radius: 20rpx;
      }

      &:nth-child(3n + 1):nth-last-child(2),
      &:nth-child(3n + 2):last-child {
        width: 280rpx;
        height: 300rpx;
      }

      &:nth-child(3n + 2) {
        margin: 0 12rpx;
      }

      &:nth-child(n + 4) {
        // margin-top: 12rpx;
      }

      &:first-child {
        border-top-left-radius: 20rpx;
      }

      &:last-child {
        margin-right: 0;
        border-bottom-right-radius: 20rpx;
      }

      &:nth-child(3n + 1) {
        &:last-child,
        &:nth-last-child(2),
        &:nth-last-child(3) {
          border-bottom-left-radius: 20rpx;
        }
      }

      &:nth-child(2):last-child,
      &:nth-child(3) {
        border-top-right-radius: 20rpx;
      }

      &:nth-child(2):nth-last-child(3) {
        margin-right: 40rpx;
      }

      &:nth-child(2):nth-last-child(3) {
        border-top-right-radius: 20rpx;
      }

      &:nth-child(3):nth-last-child(2) {
        margin-top: 12rpx;
        margin-right: 12rpx;
        border-radius: 0 0 0 20rpx;
      }

      &:nth-child(4):last-child {
        border-radius: 0 0 20rpx 0;
      }
    }

    & > view {
      width: 100%;
    }
  }
}
</style>
